// 全局注册组件
Vue.component('choice-market', {
    template: `
        <div class="market-main" v-if="ismarket">
            <div class="market-header"><i class="market-goback" @click="closeMarket()">返回</i>选择你负责采买的超市</div>
            <div class="market-headerInputBox">
                <span>深圳</span><input type="text" v-model="key" placeholder="请输入超市名称" class="market-headerInput">
            </div>

            <div class="market-container">
                <cube-scroll
                    ref="marketList"
                    :data="marketList"
                    :options="scrollOptions"
                    @pulling-up="searchMore">
                    <ul v-if="marketList && marketList.length > 0">
                        <li class="market-list" v-for="(item,index) in marketList" :key="index" @click="choiceMarket(item)">
                            <h1 class="market-listTitle" v-html="item.name"></h1><p class="market-listMarket">{{item.fullName}}</p>
                        </li>
                    </ul>
                    <div class="market-noResult" v-else-if="marketList && marketList.length === 0">暂无结果</div>
                </cube-scroll>
            </div>
        </div>
    `,
    props: ['ismarket'],
    data() {
        return {
            pullUpLoad: false,
            pullUpLoadThreshold: 0,
            pullUpLoadNoMoreTxt: '没有更多了！',
            marketList: null,
            loading: true,
            currentPage: 1,
            pageSize: 20,
            totalPage: 2,
            key: ''
        }
    },
    computed: {
        scrollOptions () {
            return {
                pullUpLoad: this.pullUpLoadObj
            }
        },
        pullUpLoadObj: function() {
            return this.pullUpLoad ? {
                threshold: parseInt(this.pullUpLoadThreshold),
                txt: {
                    noMore: this.pullUpLoadNoMoreTxt
                }
            } : false
        }
    },
    watch: {
        key (val) {
            if (val.length > 0) {
                this.pullUpLoad = true
                this.currentPage = 1
                this.getSearchData()
            } else {
                this.marketList = null
                this.pullUpLoad = false
            }
        }
    },
    methods: {
        // 搜索小区弹窗关闭，返回
        closeMarket () {
            this.$emit('changemarket' , false)
        },
        // 无限加载小区数据
        searchMore () {
            this.currentPage ++
            if(this.currentPage > this.totalPage){
                this.loading = true
                this.$refs.marketList.forceUpdate()
                return
            }
            this.getSearchData()
        },
        // 获取超市数据
        getSearchData () {
            Axios.post('area/Supermarket/getSupermarketByKey.do', {
                key: this.key,
                currentPage: this.currentPage,
                pageSize: this.pageSize
            }).then(res => {
                if (res.respCode === 'S') {
                    let list = res.data.data
                    let reg = new RegExp(this.key, 'g')
                    list.forEach(item => {
                        item.name = item.name.replace(reg, '<i>' + this.key +'</i>')
                    })
                    if (this.currentPage === 1) {
                        this.marketList = list
                    } else {
                        this.marketList = this.marketList.concat(list)
                    }
                    this.totalPage = res.data.totalPage

                    if (this.currentPage >= this.totalPage) {
                        this.loading = true
                        this.$refs.marketList.forceUpdate()
                    } else {
                        this.loading = false
                    }
                }
            })
        },
        // 选择小区
        choiceMarket (item) {            
            let reg = new RegExp('<i>', 'g')
            let reg1 = new RegExp('</i>', 'g')
            item.name = item.name.replace(reg, '')
            item.name = item.name.replace(reg1, '')
            let data = {
                supermarketName: item.name,
                supermarketId: item.supermarketId/* ,
                marketOne: item.smallCommunityId */
            }
            this.$emit('choicemarket', data)
            this.closeMarket()
            this.key = ''
            this.currentPage = 1
            this.marketList = null
        }
    }
});